<template>
  <div class="page2">
    <!-- <van-nav-bar title="会议管理" class="title" /> -->
    <div class="title">会议室管理</div>
    <div class="bg">
      <van-image :src="require('@/assets/images/home/bg.png')" alt="" height="213rpx" style="display: block" />
    </div>
    <div class="content">
      <strong class="content-item" style="margin: 10px">主要功能</strong>
      <div class="list">
        <div class="list-item" v-for="item in list" :key="item.id" @click="handleGoPage(item.path)">
          <div class="list-item-content">
            <van-image :src="item.icon" alt="" width="40px" style="display: block;" />
            <div>
              <div class="list-item-title">{{ item.title }}</div>
              <div class="list-item-title2">{{ item.title2 }}</div>
            </div>
          </div>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>

    <!-- <van-grid :column-num="1">
      <van-grid-item v-for="item in list" :key="item.id" style="margin: 0px" class="list">
        <div class="list-item">
          <van-image
            :src="item.icon"
            alt=""
            width="50px"
            style="display: block"
          />
          <div>
            <div>会议室预约</div>
            <div>MEETING ROOM RESERVATION</div>
          </div>
          <van-icon name="arrow" />
        </div>
      </van-grid-item>
    </van-grid> -->

    <!-- 
    <van-grid square :column-num="2" :icon-size="80">
      <van-grid-item v-for="basicComponent in basicComponents" :key="basicComponent.componentName"
        v-bind:icon="basicComponent.previewUrl" v-bind:text="basicComponent.title"
        v-on:click="showActionSheet(basicComponent.title, basicComponent.componentName)">

      </van-grid-item>
    </van-grid>

    <van-action-sheet v-model="show" v-bind:title="currentActionSheetTitle">
      <div class="content">
        <component :is="currentActionSheetComponent" />
      </div>
    </van-action-sheet> -->
  </div>
</template>

<script>
import Vue from "vue";
import {
  Tab,
  Tabs,
  Grid,
  GridItem,
  Image,
  ActionSheet,
  Divider,
  Cell,
  List,
  Icon,
} from "vant";

// import Button from '../components/basic-components/button/index.vue'
// import DropdownMenu from '../components/basic-components/dropdownMenu/index.vue'
// import Popover from '../components/basic-components/popover/index.vue'
// import BizCalendarChooseDateTime from '../components/jsapi/biz.calendar.chooseDateTime/index.vue'
// import BizContactComplexPicker from '../components/jsapi/biz.contact.complexPicker/index.vue'

Vue.use(Icon);
Vue.use(List);
Vue.use(Cell);
Vue.use(Divider);
Vue.use(ActionSheet);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Image);
Vue.use(Tab);
Vue.use(Tabs);

export default {
  name: "Home",
  // components: {
  //   Button,
  //   DropdownMenu,
  //   Popover,
  //   BizCalendarChooseDateTime,
  //   BizContactComplexPicker,
  // },
  methods: {
    showActionSheet(title, componentName) {
      this.show = true;
      this.currentActionSheetTitle = title;
      this.currentActionSheetComponent = componentName;
    },
    handleGoPage(path) {
      this.$router.push(path)
    }
  },
  data() {
    return {
      list: [
        {
          title: "会议预约",
          title2: "MEETING ROOM RESERVATION",
          id: 1,
          icon: require("@/assets/images/home/meetingPreview.png"),
          path: "/meetingSubscribe"
        },
        {
          title: "预约列表",
          title2: "SUBSCRIBE LIST",
          id: 2,
          icon: require("@/assets/images/home/reservationList.png"),
          path: "/subscribeList"
        },
        {
          title: "会议室一览",
          title2: "MEETING ROOM OVERVIEW",
          id: 3,
          icon: require("@/assets/images/home/meetingPreview.png"),
          path: "/meetingOverview"
        },
        {
          title: "会议室管理",
          title2: "CONFERENCE ROOM MANAGEMENT",
          id: 4,
          icon: require("@/assets/images/home/meetingManage.png"),
          path: "/meetingManage"
        },
      ],
      active: 0,
      show: false,
      currentActionSheetTitle: "",
      currentActionSheetComponent: "",
      basicComponents: [
        {
          title: "按钮",
          componentName: "Button",
          previewUrl:
            "https://img.alicdn.com/imgextra/i1/O1CN01rGcU9X1by9xPcJjuK_!!6000000003533-2-tps-612-292.png",
        },
        {
          title: "下拉菜单",
          componentName: "DropdownMenu",
          previewUrl:
            "https://img.alicdn.com/imgextra/i1/O1CN015SSxf71IWFB5imj3p_!!6000000000900-2-tps-612-292.png",
        },
        {
          title: "气泡弹出框",
          componentName: "Popover",
          previewUrl:
            "https://gw.alicdn.com/imgextra/i1/O1CN01rECNlj1TSXiAlsxOl_!!6000000002381-2-tps-612-292.png",
        },
      ],
      jsapi: [
        {
          header: "UI-dd",
          items: [
            {
              name: "biz.calendar.chooseDateTime",
              key: "BizCalendarChooseDateTime",
              desc: "选择某时间",
            },
          ],
        },
        {
          header: "Contact",
          items: [
            {
              name: "biz.contact.complexPicker",
              key: "BizContactComplexPicker",
              desc: "选择部门和人",
            },
          ],
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.page2 {
  background-color: #eff2fa;
  background: linear-gradient(to bottom, #9fc3f4, #e2eaf9a6, #eff2fa, #eff2fa);

  .title {
    padding-top: 12px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
  }

  .content {
    padding: 10px 0;

    .content-item {
      margin: 0 10px;
    }

    .list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 15px 0;

      .list-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        padding: 10px;
        border-radius: 10px;
        background-color: #fff;
        box-shadow: 2px 3px 3px 1.3px rgb(150 180 255 / 10%);
        font-family: PingFangSC, PingFang SC;

        .list-item-content {
          display: flex;
          align-items: center;
          flex: 1;
          gap: 10px;

          .list-item-title {
            color: #0B0B0B;
            font-size: 34rpx;
            font-weight: 500;
            font-style: normal;
            line-height: 48rpx;
          }

          .list-item-title2 {
            font-weight: 400;
            font-size: 12px;
            color: #787878;
            line-height: 33rpx;
            font-style: normal;
            text-transform: uppercase;
          }
        }
      }
    }
  }
}
</style>
